<template>
  <view class="relative">
    <u-navbar title="维修工单" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000"
      title-size="37" />
    <view class="flex flex-column justify-between " id="container" :style="{ minHeight: `calc(100vh - ${top}px)` }">
      <view class="">
        <sub-title class="mt-20" title="维修概况"> </sub-title>
        <view class="p-lr-40 mb-20 color-888888">
          <view class="fz-30 lh-42 mt-20 flex justify-between">
            <text class="w-200">设备名称</text>
            <view class="flex1 text-right">
              <text>{{ workOrderInfo.deviceName || '-' }}</text>
            </view>
          </view>
          <view class="fz-30 lh-42 mt-20 flex justify-between">
            <text class="w-200">设备编号</text>
            <view class="flex1 text-right">
              <text>{{ workOrderInfo.deviceNo || '-' }}</text>
            </view>
          </view>
          <view class="fz-30 lh-42 mt-20 flex justify-between">
            <text class="w-200">分组房间</text>
            <view class="flex1 text-right">
              <text>{{ workOrderInfo.roomName || '-' }}</text>
            </view>
          </view>
          <view class="fz-30 lh-42 mt-20 flex justify-between">
            <text class="w-200">维修工程师</text>
            <view class="flex1 text-right">
              <text>{{ workOrderInfo.repairStaff || '-' }}</text>
            </view>
          </view>
          <view class="fz-30 lh-42 mt-20 flex justify-between">
            <text class="w-200">维修开始时间</text>
            <view class="flex1 text-right">
              <text>{{ workOrderInfo.startTime || '-' }}</text>
            </view>
          </view>
        </view>

        <sub-title class="mt-20" title="故障内容"> </sub-title>
        <view class="p-lr-40 mb-20 ">
          <view class="fz-30 lh-42 mt-20 ">
            <text class="w-200 color-333333 font-bold">故障描述</text>
            <view class="break-all color-888888 mt-10">
              <text>{{ workOrderInfo.description || '暂无描述' }}</text>
            </view>
          </view>
          <view class="fz-30 lh-42 mt-20 ">
            <text class="w-200 color-333333 font-bold">关联照片</text>
            <view class="flex mt-20 flex-wrap">
              <!-- 图片缩略图 -->
              <view class="relative mr-30 mb-30" v-for="(item, index) in workOrderInfo.imageList" :key="index">
                <image class="h-150 w-150" :data-cur="item.url" :src="item.url" @tap="previewImage"/>
              </view>

              <view v-if="workOrderInfo.imageList && workOrderInfo.imageList.length === 0"
                class="w-150 h-150 bg-CCCCCC flex flex-column align-center justify-center">
                <image class="w-47 h-40" src="@/static/images/common/empty.png"></image>
                <text class="color-fff fz-24 lh-33 mt-10">暂无图片</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="bg-fff sticky bottom0 flex align-center justify-center color-fff fz-30 lh-80 h-244">
      <view v-if="status === REP_WORK_ORDER_STATUS.TO_REPAIR.value" class="w-250 h-80 br-10 bg-19BE6B text-center" @tap="beginFix">
        <text>开始维修</text>
      </view>

      <view v-else class="w-250 h-80 br-10 bg-19BE6B text-center" @tap="continueFix">
        <text>继续维修</text>
      </view>
    </view>
    </view>
    <!-- 开始维修遮罩层-->
    <u-mask :show="isShowMask" :mask-click-able="false">
      <view class="flex justify-center align-center h-full color-fff fz-32 font-bold">
        <text>提交中...</text>
        <u-loading mode="circle"></u-loading>
      </view>
    </u-mask>

    <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" mask-close-able v-model="errorShow">
      <view class="h-150 flex align-center justify-center font-bold">
        <image class="mr-20 w-38 h-38 ml-20" src="@/static/images/mine/error.png"></image>
        <text class="fz-30 color-333333 err-text">{{ errorContent }}</text>
      </view>
    </u-modal>

  </view>
</template>

<script >
import getNavBarHeight from "@/mixins/getNavBarHeight";

import subTitle from "@/components/SubTitle/SubTitle";
import { workOrderDetail ,workOrderStart } from "@/api/repair/workOrder";

import { REP_WORK_ORDER_STATUS } from "@/utils/dict"

export default {
  name: 'FixUndoneDetail',
  mixins: [getNavBarHeight],
  computed: {
    REP_WORK_ORDER_STATUS () {
      return REP_WORK_ORDER_STATUS
    }
  },
  data () {
    return {
      isShowMask: false,
      status: '',
      workOrderId: '',
      hospitalId: '',
      workOrderInfo: {},
      photoFiles: [],
      errorShow:false,
      errorContent:''
    }
  },
  components: {
    subTitle
  },
  onLoad (options) {
    this.status = options.status
    this.workOrderId = options.workOrderId
    this.hospitalId = options.hospitalId
    this.doQuery()
  },
  onShow () {
  },
  methods: {
    doQuery () {
      workOrderDetail(this.workOrderId).then(res => {
        this.workOrderInfo = res.data || {}
        this.status = this.workOrderInfo.status
      })
    },
    beginFix () {
      this.toFix()
    },
    continueFix(){
      if(this.status === this.REP_WORK_ORDER_STATUS.DO_REPAIR.value){
        this.toFixRecord()
      }else{
        this.toFix()
      }
    },
    toFix(){
      workOrderStart( this.workOrderId ).then(res=>{
        if(res.code===200){
          this.toFixRecord()
        }
      }).catch(res=>{

      })
    },
    toFixRecord(){
      this.$tab.navigateTo(`/pages/repair/fix-record?hospitalId=${this.workOrderInfo.hospitalId}&workOrderId=${this.workOrderInfo.workOrderId}`)
    },
    // 点击预览
    previewImage (e) {
      const current = e.currentTarget.dataset.cur;
      const urls = this.workOrderInfo.imageList.map(el => el.url);
      uni.previewImage({
        current: current,
        urls: urls,
        indicator: "none",
      });
    },
  },
}
</script>


<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped></style>
